<template>
  <div class="main">

    <img class="img" :src="logo" @click="toIndex" alt="" />

    <el-row :gutter="3" class="el-row0">
      <el-col :span="1.5" class="link">{{nav[0]}}</el-col>
      <el-col :span="0.5" class="l">/</el-col>
      <el-col :span="1.5">
        <a @click="toExhibition('')" class="link">{{nav[1]}}</a>
      </el-col>
      <el-col :span="0.5" class="l">/</el-col>
      <el-col :span="0.5">
        <a @click="toExhibition('男')" class="link">{{nav[2]}}</a>
      </el-col>
      <el-col :span="0.5" class="l">/</el-col>
      <el-col :span="0.5">
        <a @click="toExhibition('女')" class="link">{{nav[3]}}</a>
      </el-col>
      <el-col :span="0.5" class="l">/</el-col>
      <el-col :span="0.5" @click="setQueryStr('包')" class="link">
        <a @click="toExhibition('包')" class="link">{{nav[4]}}</a>
        </el-col>
      <el-col :span="0.5" class="l">/</el-col>
      <el-col :span="0.5" class="link">{{nav[5]}}</el-col>
      <el-col :span="0.5" class="l">/</el-col>
      <el-col :span="1.5" class="link">{{nav[6]}}</el-col>
      <el-col :span="0.5" class="l">/</el-col>
      <el-col :span="1.5" class="link">{{nav[7]}}</el-col>
      <el-col :span="0.5" class="l">/</el-col>
      <el-col :span="1" class="link">{{nav[8]}}</el-col>
    </el-row>

    <el-input class="el-input" placeholder="搜索 VANS" suffix-icon="el-icon-search" v-model="inputStr" @keyup.enter.native="setQueryStr(inputStr)"></el-input>

    <el-row :gutter="5" class="el-row1">
      <el-col :span="2">
        <i class="el-icon-shopping-cart-2"></i>
        <a @click="toCart" class="link">{{rul[0]}}</a>
      </el-col>
      <div v-if="!loginStatus">
        <el-col :span="0.5" class="link"><a @click="toLogin" class="link">{{rul[1]}}</a></el-col>
        <el-col :span="0.5" class="ll">/</el-col>
        <el-col :span="0.5" class="link"><a @click="toLogin" class="link">{{rul[2]}}</a></el-col>
      </div>
      <div v-if="loginStatus">
        <el-col :span="0.5"><a>欢迎：{{user[0]}}</a></el-col>
        <el-col :span="0.5" class="ll">/</el-col>
        <el-col :span="0.5" class="link"><a @click="Logout" class="link">注销</a></el-col>
      </div>
    </el-row>

    <div class="line"></div>

  </div>
</template>

<script>
import {getLogoImg, navList, rightUpList} from '../../assets/data/header.js'
import {mapMutations, mapState} from "vuex"
export default {
  name: "Header",
  data: function () {
    return {
      inputStr: "",
      nav:navList(),
      rul:rightUpList(),
      logo:getLogoImg(),
    };
  },
  computed:{
    ...mapState(["user"]),
    ...mapState(["loginStatus"])
  },
  methods: {
    toExhibition: function (str) {
      this.setQueryStr(str)
      this.$router.push("/exhibition");
    },
    toCart: function () {
      this.$router.push("/cart");
    },
    toLogin: function () {
      this.$router.push("/login");
    },
    toIndex: function () {
      this.$router.push("/index");
    },
    ...mapMutations(["setQueryStr"]),
    ...mapMutations(["Logout"])
  }
};
</script>

<style scoped>
/* .k {
  border: 1px red solid;
} */
.l {
  font-size: 15px;
  width: 45px;
  text-align: center;
  color: #9a9a9a;
}
.ll {
  font-size: 16px;
  width: 15px;
  text-align: center;
  color: #9a9a9a;
}
.link {
  text-decoration: none;
  /* color: #000; */
}
.link:hover {
  cursor: pointer;
  color: #d6000f;
}
.main {
  overflow: hidden;
  /* border: 1px red solid; */
  width: 100%;
  height: 130px;
  position: relative;
}
.img {
  width: 160px;
  top: 20px;
  position: relative;
  left: 300px;
}
.line {
  width: 100%;
  height: 15px;
  background: #000;
  position: absolute;
  bottom: 0;
}
.el-row0 {
  /* text-align: center; */
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 17px;
  font-weight: bold;
  position: relative;
  color: #000;
  left: 25%;
  top: -12%;
}
.el-row1 {
  text-align: center;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 17px;
  color: #9b9b9b;
  /* font-weight: bold; */
  position: relative;
  left: 65%;
  top: -80%;
}

.el-input {
  width: 170px;
  position: absolute;
  right: 17%;
  top: 48%;
}
.el-input_inner {
  border-color: red;
}
</style>